<template>
  <div class="menu-wrapper" :class="[navStyle, pageStyle]">
    <div
      class="title text-[22px] h-[64px] flex items-center justify-center mr-4"
    >
      博客管理系统
    </div>
    <a-menu
      :selected-keys="selectedKeys"
      :mode="mode"
      :theme="menuTheme"
      :inline-collapsed="menus.collapsed"
      @select="onSelect"
    >
      <a-menu-item v-for="menu in MENUS" :key="menu.path">
        <a-icon :type="menu.icon" />
        <span>{{ menu.title }}</span>
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
import { MENUS } from '@/constants'
export default {
  data() {
    return {
      MENUS,
      selectedKeys: [],
    }
  },

  computed: {
    menus() {
      return this.$store.state.admin.menus
    },
    navStyle() {
      return this.$store.state.admin.navStyle
    },
    pageStyle() {
      return this.$store.state.admin.pageStyle
    },
    mode() {
      return this.navStyle === 'top' ? 'horizontal' : 'vertical'
    },
    menuTheme() {
      return this.pageStyle === 'white' ? 'light' : 'dark'
    },
  },
  watch: {
    $route: {
      handler(v) {
        this.selectedKeys = [v.path]
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    onSelect(v) {
      this.$router.push(this.localeLocation({ path: v.key }))
    },
  },
}
</script>

<style lang="scss" scoped>
.menu-wrapper {
  &.top {
    display: flex;
    align-items: center;
    .title {
      height: auto;
    }
    .ant-menu {
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: none;
      .ant-menu-item {
        border-bottom: none;
        display: flex;
        align-items: center;
        &.ant-menu-item-selected {
          background-color: transparent;
        }
      }
    }
  }
}
</style>
